﻿{extend name="public:base" /}

{block name="css"}
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"/>
<link href="__ADMIN__/css/style.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="__PLUG__/webuploader-0.1.5/webuploader.css">

<style>
    layui-progress-big, .layui-progress-big .layui-progress-bar {
        height: 30px;
        line-height: 30px
    }

    .layui-progress {
        position: relative;
        height: 30px;
        border-radius: 20px;
        background-color: #eee;
    }

    .layui-progress-text {
        position: relative;
        top: -20px;
        line-height: 30px;
        font-size: 12px;
        color: #666;
    }

    .webuploader-pick {
        width: 120px;
        background: #1ab394;
        padding: 9px 0;
        font-size: 13px;
    }

    .webuploader-pick-hover {
        background: #19A689;
    }
</style>{/block}

{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <form method="post">
                        <div class="box-item box-item-video">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">视频</label>
                                <div class="col-sm-3">
                                    <div class="layui-progress layui-progress-big" lay-filter="number" lay-showPercent="true">
                                        <div class="layui-progress-bar" lay-percent="0%"></div>
                                    </div>
                                </div>

                                <div class="col-sm-3">
                                    <input type="file" id="file" accept="video/*" style="display: none">
                                    <input type="hidden" name="video_id" id="video" value="{$info['video_id']|default=''}"/>
                                    <div id="upload_video">
                                        上传视频
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row" id="video_box" style="display: none">
                                <label class="col-sm-1 col-form-label"></label>
                                <div class="col-sm-3">
                                    <video src="" controls></video>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{/block}

{block name='js'}
<script src="__STATIC__/layui/layui.js"></script>
<script src="__PLUG__/webuploader-0.1.5/webuploader.js"></script>
<script>
    $(function () {
        /************   WebUploader upload video start   ************/
        var uploader = WebUploader.create({
            // swf文件路径
            swf: 'webuploader/Uploader.swf',
            // 文件接收服务端。
            server: "{:url('/upload/UploadFile/webUploaderUploadFile')}",
            // 选择文件的按钮
            pick: "#upload_video",
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            // 选完文件后，是否自动上传。
            auto: true,
            // 图片name
            fileVal: 'file',
            // 单文件
            multiple: false,
            //是否要分片处理大文件上传
            chunked: true,
            //分片上传，每片2M，默认是5M
            chunkSize: 5 * 1024 * 1024,
            // 单个文件大小限制 10 G
            fileSingleSizeLimit: 10 * 1024 * 1024 * 1024,
        });

        var uploader_loading;
        uploader.on('uploadProgress', function (file, percentage) {
            var percent = parseFloat(percentage * 100).toFixed(2);
            layui.element.progress('number', percent + '%');
            if (percent == 100) {
                uploader_loading = layer.load(2, {
                    shade: [0.8, '#393D49'],
                    content: '<span style="margin-left: -145px;color: red;">正在完成上传视频最后步骤，请勿刷新页面！！！</div>',
                    success: function (layero) {
                        layero.find('.layui-layer-content').css({
                            'padding-top': '50px',
                            'width': '300px',
                            'font-size': '16px',
                            'font-weight': '600'
                        });
                    }
                })
            }
        });


        uploader.on('uploadSuccess', function (file, res) {
            layer.close(uploader_loading);
            var id = res.data.id;
            var path = res.data.path;

            let fileUrl = URL.createObjectURL(file.source.source);
            let audioElement = new Audio(fileUrl);

            new Promise(resolve => {
                audioElement.addEventListener("loadedmetadata", (_event) => {
                    duration = parseInt(audioElement.duration);
                    resolve(duration);
                });
            }).then(duration => {
                $('.duration').val(duration);
            })

            $('#video').val(id);
            $('#video_box').show().find('video').attr('src', path);


        });
        /************   WebUploader upload video end   ************/
    })
</script>{/block}
